<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" labelWidth="120" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="part_report_threeOrderExecution_main"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      :isSelectColumn="false"
      :onSyncTableData="tableHandle"
      :dataSource="tableDataList"
      :isMemoryPagination="true"
      :isExportExcel="true"
      exportFileName="三方订单执行情况.xlsx"
    >
      <!-- :fetchapi="fetchApi"
      :params="fetchParams" -->
      <!-- :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'" -->
      <template slot="controls">
        <el-button size="small" type="primary" @click="addRecordHandle">到货确认</el-button>
      </template>
    </FilterTable>
    <!-- 选择到货确认 -->
    <BaseDialog :visible.sync="visibleArrival" title="选择到货确认" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <arrivalSelection type="edit" :modifyType="modifyType" :rowData="formData" @onConfirm="handlerSelectConfirm" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>

<script>
/*
 *
 * 三方订单执行情况报表.
 * * 测试的时候 订货申请单号用 0020265463
 * model.setI_WXZ("7580208");
 */

import { authority } from '@/utils/authMixin';
import { queryThreeOrderInfo, confirmNotice } from '@/api/part/report/threeOrderExecution';
import moment from 'moment';
import arrivalSelection from './arrivalSelection';
export default {
  name: 'threeOrderInfo',
  components: {
    arrivalSelection
  },
  mixins: [authority],
  data() {
    return {
      visible: false,
      visibleArrival: false,
      topFilterList: this.createTopFilters(),
      fetchApi: queryThreeOrderInfo,
      columns: this.createTableColumns(),
      fetchParams: { xhrAbort: true },
      formData: {}, // 向子组件传数据的数组
      tableData: [], // 表单数据
      modifyType: true, // 该页面默认为修改
      tableDataList: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '预到货单号',
          fieldName: 'I_SVSCH'
          // rules: [{ required: true, message: '请输入预到货单号', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '订货申请单号',
          fieldName: 'I_QVBELN'
          // rules: [{ required: true, message: '订货申请单号不能为空', trigger: 'blur' }]
        },
        {
          type: 'RANGE_DATE',
          label: '订货申请日期',
          dateType: 'daterange',
          initialValue: [
            moment()
              .subtract(1, 'month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          style: { minWidth: '120px' },
          fieldName: 'I_QERDATS|I_QERDARE'
        },
        {
          type: 'INPUT',
          label: '发货单号',
          fieldName: 'I_DVBELN'
        },
        {
          type: 'RANGE_DATE',
          label: '发货单日期 ',
          dateType: 'daterange',
          style: { minWidth: '180px' },
          fieldName: 'I_DERDATS|I_DERDARE'
        },
        {
          type: 'INPUT',
          label: '销售订单号',
          fieldName: 'I_SVBELN'
        },
        {
          type: 'RANGE_DATE',
          label: '销售订单日期',
          dateType: 'daterange',
          style: { minWidth: '180px' },
          fieldName: 'I_SERDATS|I_SERDARE'
        },
        {
          type: 'INPUT',
          label: '采购订单号',
          fieldName: 'I_PONUM'
        },
        {
          type: 'SELECT',
          label: '确认状态',
          fieldName: 'I_QCFM',
          itemList: [
            { text: '全部', value: '' },
            { text: '已确认', value: 'X' },
            { text: '未确认', value: 'N' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '需求单号',
          dataIndex: 'QVBELN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '预到货单号',
          dataIndex: 'SVSCH',
          sorter: true,
          filter: true,
          align: 'center',
          filterType: 'input'
        },
        {
          title: '客户采购订单号',
          dataIndex: 'DHH',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '建立用户',
          dataIndex: 'QERNAM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '建立日期',
          dataIndex: 'QERDAT',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '需求单类型',
          dataIndex: 'QAUART',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '到货确认',
          dataIndex: 'QCFM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: params => {
            let statusName = '';
            switch (params.row.QCFM) {
              case 'X':
                statusName = '已确认';
                break;
              case 'N':
                statusName = '未确认';
                break;
            }
            return <span>{statusName}</span>;
          }
        },
        {
          title: '到货确认用户',
          dataIndex: 'QCNAM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '到货确认日期',
          dataIndex: 'QCDAT',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '到货确认时间',
          dataIndex: 'QCTIM',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售订单号',
          dataIndex: 'SVBELN',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售订单建立日期',
          dataIndex: 'SERDAT',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '发货点',
          dataIndex: 'VSTEL',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发货单号',
          dataIndex: 'DVBELN',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发货单建立日期',
          dataIndex: 'DERDAT',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '是否发往中转库',
          dataIndex: 'ZZKFLAG',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '出库文本',
          dataIndex: 'DMATDOC',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售发票',
          dataIndex: 'BVBELN',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售发票建立日期',
          dataIndex: 'BERDAT',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '剩余有效天数',
          dataIndex: 'YXDAYS',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '三方订单供应商联系人',
          dataIndex: 'LF_LINKMEN',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '三方订单供应商联系人电话',
          dataIndex: 'LF_TEL',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '三方订单运输车司机',
          dataIndex: 'TR_DRIVER',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '三方订单司机联系电话',
          dataIndex: 'DRIVERTEL',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '预送货日期',
          dataIndex: 'WA_DAT',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    },
    // 搜索
    async changeHandle(val) {
      this.fetchParams = Object.assign({}, { xhrAbort: true }, val);
      let res = await queryThreeOrderInfo(val);
      this.tableDataList = res.data;

      // this.fetchParams.xhrAbort = true;
      // this.fetchParams = Object.assign(this.fetchParams, { xhrAbort: false }, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    // table动态回调函数
    tableHandle(val) {
      this.tableData = val;
      console.log(this.tableData);
    },
    handlerSelectConfirm() {},
    addRecordHandle() {
      this.visibleArrival = true;
    },
    closeHandler(val, data) {
      this.visibleArrival = false;
      // // 需要主页面刷新
      // this.closeHandler('refresh');
      // this.fetchParams = { ...this.fetchParams };
    }
  }
};
</script>

<style lang="less" scoped></style>
